<template>
	<div class="chaChong">
		<div class="bfff left-bottom">
			<div class="center flex-start table-head fWrap">
				<div class="c666 f14">标题：</div>
				<div>
					<el-input
						type="text"
						placeholder="请输入标题..."
						v-model="title"
						@keyup.enter.native="searchList"
					/>
				</div>
				<div class="c666 f14">作者：</div>
				<el-input type="text" placeholder="请输入作者..." v-model="people" @keyup.enter.native="searchList" />
				<div class="flex-s">
					<div class="c666 f14">状态：</div>
					<el-select v-model="status" class="m-2" placeholder="请选择状态...">
						<el-option v-for="item in check" :key="item.value" :label="item.desc" :value="item.code" />
					</el-select>
				</div>
				<div class="flex-s disNo">
					<div class="c666 f14">创建时间：</div>
					<div>
						<el-date-picker
							v-model="times"
							type="datetimerange"
							range-separator="-"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
							value-format="YYYY-MM-DD HH:mm:ss"
						></el-date-picker>
					</div>
				</div>
				<div class="button-man">
					<el-button class="primary" type="primary" @click="searchList">搜索</el-button>
					<el-button type="primary" plain @click="resetting">重置</el-button>
				</div>
			</div>
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="上传文档" name="1"></el-tab-pane>
				<el-tab-pane label="文档对比" name="2"></el-tab-pane>
			</el-tabs>
			<div class="table-scrol">
				<div class="delAll">
					<el-alert type="primary" v-if="delList.length != 0" :closable="false">
						<template #title="{ row }">
							<div class="elElert">
								<div>
									已选择&nbsp;<span style="color: #2971ff">{{ delList.length }}&nbsp;</span>项
								</div>
								<div class="tags" @click="delTable">清空</div>
							</div>
						</template>
					</el-alert>
					<el-button :type="delType" @click="del()" :disabled="delType == 'info'" plain>批量删除</el-button>
				</div>
				<div class="table">
					<el-table
						@select="selectTable"
						ref="tableRef"
						@select-all="selectAll"
						:data="list"
						style="width: 100%"
					>
						<el-table-column align="center" type="selection" min-width="60" />
						<el-table-column
							align="center"
							prop="title"
							label="标题"
							show-overflow-tooltip
							min-width="200"
						/>
						<el-table-column
							align="center"
							prop="author"
							label="作者"
							show-overflow-tooltip
							min-width="100"
						/>
						<el-table-column align="center" label="原文名称" min-width="100">
							<template #default="{ row }">
								{{ original(row.uploadPath.name) }}
							</template>
						</el-table-column>
						<el-table-column align="center" :min-width="minW">
							<template #header>
								<div v-if="activeName == 2">对比文档</div>
							</template>
							<template #default="{ row }">
								<div v-if="activeName == 2">{{ original(row.contrastPath.name) }}</div>
							</template>
						</el-table-column>
						<!-- <el-table-column
							align="center"
							prop="type"
							label="类型"
							show-overflow-tooltip
							min-width="100"
						/> -->
						<!-- <el-table-column
							align="center"
							prop="weight"
							label="初始权重"
							show-overflow-tooltip
							min-width="100"
						>
							<template #default="{ row }">
								<el-text class="mx-1" v-if="row.weight >= 50" type="primary"
									>{{ row.weight }}%
								</el-text>
								<el-text class="mx-1" v-else-if="row.weight == 0" type="danger"
									>{{ row.weight }}
								</el-text>
								<el-text class="mx-1" v-else type="danger">{{ row.weight }}% </el-text>
							</template>
						</el-table-column> -->
						<!-- <el-table-column
							align="center"
							prop="contextLength"
							label="上下文间距"
							show-overflow-tooltip
							min-width="100"
						>
							<template #default="{ row }">
								<el-text class="mx-1" type="primary">{{ row.contextLength }} </el-text>
							</template>
						</el-table-column> -->
						<!-- <el-table-column
							align="center"
							prop="readDataLength"
							label="读取数据长度"
							show-overflow-tooltip
							min-width="120"
						>
							<template #default="{ row }">
								<el-text class="mx-1" type="primary">{{ row.maxNumberContiguous }} </el-text>
							</template>
						</el-table-column>

						<el-table-column
							align="center"
							prop="maxNumberContiguous"
							label="最大连续数"
							show-overflow-tooltip
							min-width="100"
						>
							<template #default="{ row }">
								<el-text class="mx-1" type="primary">{{ row.maxNumberContiguous }} </el-text>
							</template>
						</el-table-column> -->

						<el-table-column
							align="center"
							prop="createTime"
							label="创建时间"
							show-overflow-tooltip
							min-width="150"
						>
							<template #default="{ row }">
								{{ row.createTime }}
							</template>
						</el-table-column>

						<!-- <el-table-column
							align="center"
							prop="estimatedEndTime"
							label="预计时间"
							show-overflow-tooltip
							min-width="150"
						>
							<template #default="{ row }">
								{{ row.estimatedEndTime }}
							</template>
						</el-table-column> -->
						<el-table-column
							align="center"
							prop="status"
							label="状态"
							show-overflow-tooltip
							min-width="100"
						>
							<template #default="{ row }">
								<div v-for="item in check">
									<el-tag v-if="item.code == row.status" :class="isType(row.status)">{{
										item.desc
									}}</el-tag>
								</div>
							</template>
						</el-table-column>
						<el-table-column align="center" label="操作" show-overflow-tooltip min-width="200">
							<template #default="{ row }">
								<el-button :icon="View" :disabled="row.status != 4" title="查看" @click="look(row)" />
								<el-button
									:icon="Download"
									title="下载"
									:disabled="row.status != 4"
									@click="downloads(row)"
								/>
								<el-button :icon="Delete" title="删除" @click="del(row)" />
							</template>
						</el-table-column>
						<template #empty>
							<el-empty description="暂无数据" />
						</template>
					</el-table>
				</div>
			</div>
			<div class="bfff pagination-class">
				<v-pagination
					:total="+total"
					v-model:size="pageSize"
					v-model:page="current"
					@pagination="created"
					@paginations="created"
				></v-pagination>
			</div>
		</div>
		<!-- <el-dialog
			class="cheng-dialog"
			v-model="visibles"
			:show-close="false"
			:before-close="closes"
			:close-on-click-modal="false"
			destroy-on-close
		>
			<template #header="{ close, titleId, titleClass }">
				<div class="dialog-header center btheme cfff">
					<div class="flex f16 fbold">预览</div>
					<el-icon class="pointer" size="20" color="#fff" @click="closes">
						<Close />
					</el-icon>
				</div>
			</template>
			<div class="elLoading">
				<div v-if="versionLoading" class="preview-file-loading">
					<div class="loading"></div>
					<div>加载中...</div>
				</div>
				<iframe v-else :src="strUrl" style="width: 100%; height: 100%"></iframe>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="closes">关闭</el-button>
				</div>
			</template>
		</el-dialog> -->
	</div>
</template>

<script setup>
import { Search, RefreshRight, View, Download, Delete } from "@element-plus/icons-vue"
import jiazai from "./components/jiaZai.vue"
import { ElMessage, ElMessageBox, ElNotification } from "element-plus"
const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()

const list = ref([])
// const activeName = ref("1")
const activeName = ref("1")
const uploadType = ref("1")
const minW = ref(1)
const tableRef = ref()
//标题
const title = ref("")
// 作者
const people = ref("")
// 时间
const times = ref("")
// // 预览PDF
// const strUrl = ref("")
// 状态
const status = ref("")
const check = ref([])

// 分页
const total = ref(0)
const current = ref(1)
const pageSize = ref(10)
//下载
const downloadsIf = ref(true)
let time

//删除
const delList = ref([])
const delType = computed(() => {
	return delList.value.length != 0 ? "danger" : "info"
})

// 预览
// const visibles = ref(false)
// const versionLoading = ref(true)
function routerType() {
	if (route.query.type) {
		activeName.value = route.query.type
		uploadType.value = route.query.type
		if (activeName.value == "2") {
			minW.value = 150
		}
	}
}
routerType()
//二级分类
async function created() {
	const ress = await getAxios(
		`/check/kbDuplicateCheck/page?current=${current.value}&size=${pageSize.value}&uploadType=${uploadType.value}`
	)
	total.value = +ress.total
	list.value = ress.records
	delList.value = []
}
created()

async function checkList() {
	const res = await getAxios(`/system/enums/list?enumName=Check&moduleName=check`)
	check.value = res
}
checkList()

//清空
function empty() {
	times.value = ""
	title.value = ""
	people.value = ""
	status.value = ""
	current.value = 1
	pageSize.value = 10
	total.value = 0
}

const original = val => {
	if (val) {
		return val.substring(0, val.lastIndexOf("."))
	}
}

const statusText = val => {
	let text = ""
	check.value.forEach(item => {
		if (item.code == val) {
			text = item.desc
		}
	})
	return text
}
const searchList = async () => {
	try {
		const rss = await getAxios(`/check/kbDuplicateCheck/page`, {
			current: current.value,
			size: pageSize.value,
			title: title.value,
			author: people.value,
			uploadType: uploadType.value,
			status: status.value,
			startTime: times.value[0],
			endTime: times.value[1],
		})
		total.value = +rss.total
		list.value = rss.records
	} catch (error) {
		ElMessage.error(error)
	}
}
const resetting = () => {
	empty()
	created()
}
const isType = val => {
	switch (val) {
		case 1:
			return "class-1"
			break
		case 2:
			return "class-2"
			break
		case 3:
			return "class-3"
			break
		case 4:
			return "class-4"
			break
		case 5:
			return "class-5"
			break
		default:
			return "class-6"
			break
	}
}
// 查看
const look = async val => {
	window.open(`/viewPdf?id=${val.id}`)
}

// 下载
const downloads = async val => {
	if (!downloadsIf.value) {
		ElMessage.error("请勿重复点击")
		return
	}
	downloadsIf.value = false
	let aList = []
	aList.push(val)
	const elnot = ElNotification({
		icon: jiazai,
		message: "正在下载",
		position: "bottom-right",
	})
	try {
		const res = await postAxios(
			"/check/kbDuplicateCheck/insertDownload",
			{
				id: val.id,
				// vides: aList.map(item => item.id),
			},
			{
				download: {
					// type: "pdf",
					filename: val.uploadPath.name.substring(0, val.uploadPath.name.lastIndexOf(".")),
				},
			}
		)
		elnot.close()
		ElNotification({
			message: "下载完成",
			type: "success",
			position: "bottom-right",
		})
		time = setTimeout(() => {
			downloadsIf.value = true
		}, 2000)
	} catch (error) {
		time = setTimeout(() => {
			downloadsIf.value = true
		}, 2000)
		elnot.close()
		ElNotification({
			message: "下载失败",
			type: "error",
			position: "bottom-right",
		})
	}
}
// 关闭弹窗
// const closes = () => {
// visibles.value = false
// versionLoading.value = true
// }

//删除
const del = async val => {
	try {
		ElMessageBox.confirm("是否确认删除", "提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
		}).then(async () => {
			try {
				let idsList = []
				if (val) {
					idsList.push(val.id)
				} else {
					delList.value.forEach(item => {
						idsList.push(item.id)
					})
				}
				if (idsList.length) {
					await postAxios(`/check/kbDuplicateCheck/deleteBatch`, idsList)
					created()
					ElMessage.success("删除成功")
				} else {
					ElMessage.error("请选择...")
				}
			} catch (error) {
				ElMessage.error(error)
			}
		})
	} catch (error) {
		ElMessage.error(error)
	}
}
const selectTable = row => {
	delList.value = row
}
const selectAll = row => {
	delList.value = row
}
const handleClick = event => {
	uploadType.value = event.props.name
	list.value = []
	if (event.props.name == "2") {
		minW.value = 150
	} else {
		minW.value = 1
	}
	delList.value = []
	created()
}
const delTable = () => {
	delList.value = []
	tableRef.value.clearSelection()
}
</script>
<style lang="scss" scoped>
@import "/style/basis";
.chaChong {
	background-color: #f8f8f8;
	height: 100%;
	overflow-y: scroll;

	:deep(.el-tabs__active-bar) {
		height: 1px;
	}
	.flex-s {
		display: flex;
		align-items: center;
		:deep(.el-range-editor.el-input__wrapper) {
			width: 280px;
			@include maxWidth(1024) {
				width: 230px;
			}
			@include maxWidth(768) {
				width: 180px;
			}
			@include maxWidth(738) {
				width: 160px;
			}
		}
	}
	:deep(.el-tabs__nav-wrap::after) {
		height: 1px;
	}

	:deep(.el-tabs__header) {
		margin: 0 0 20px 0;
	}
	.table-scrol {
		margin: 20px 0;
		@include maxWidth(1376) {
			margin: 30px 0;
		}
		.class-1 {
			background-color: #ecf5ff;
			color: #58aaff;
			border: #ecf5ff;
		}
		.class-2 {
			background-color: lightblue;
			color: #fff;
			border: lightgray;
		}
		.class-3 {
			background-color: #9cc705;
			border: #9cc705;
			color: #f4f7fa;
		}
		.class-4 {
			background-color: #f0f9eb;
			color: #87cf63;
			border: #f0f9eb;
		}
		.class-5 {
			background-color: #fef0f0;
			color: #f67878;
			border: #f66969;
		}
		.class-6 {
			background-color: #f4f4f4;
			color: #666;
			border: #f4f4f4;
		}
	}
	.left-bottom {
		padding: 30px;

		.table-head2 {
			border: 1px solid #eceef5;
			height: 50px;
			padding: 0 2%;
		}

		.table-head {
			@include maxWidth(420) {
				height: 100px;
			}

			:deep(.el-input) {
				margin-right: 10px;
			}
			.button-man {
				@include maxWidth(1567) {
					padding-top: 10px;
				}
				.primary {
					margin-left: 20px;
					@include maxWidth(768) {
						margin-left: 0;
					}
				}

				.danger {
					color: #ff952c;
				}
			}
		}
		.delAll {
			display: flex;
			align-items: center;
			padding-bottom: 10px;
			.el-alert {
				width: 200px;
				margin-right: 20px;
				background-color: #eaf2ff;
				border: 1px solid #94b8ff;
				.elElert {
					display: flex;
					align-items: center;
					.tags {
						margin-left: 20px;
						color: #3077f9;
						cursor: pointer;
						&:hover {
							color: #f56c6c;
						}
					}
				}
			}
		}
		:deep(.el-table) {
			border: 1px solid #eceef5;
		}

		:deep(.el-table th.el-table__cell) {
			background-color: #f4f7fa;
		}

		:deep(.el-table .el-table__cell) {
			height: 60px;
			color: #606266;
		}
	}

	.pagination-class {
		padding-top: 20px;
		display: flex;
		justify-content: center;
	}
	:deep(.el-date-editor.el-input) {
		width: 200px;
		@include maxWidth(1400) {
			width: 150px;
		}
		@include maxWidth(1024) {
			width: 100px;
		}
		@include maxWidth(768) {
			display: none;
		}
	}
	.timi-dis {
		@include maxWidth(650) {
			display: none;
		}
	}

	:deep(.el-input) {
		width: 200px;
		@include maxWidth(1400) {
			width: 150px;
		}
		@include maxWidth(1024) {
			width: 120px;
		}
		@include maxWidth(900) {
			width: 100px;
		}
		@include maxWidth(768) {
			width: 120px;
		}
		@include maxWidth(500) {
			width: 120px;
		}
		@include maxWidth(420) {
			width: 180px;
		}
	}
	.disNo {
		@include maxWidth(768) {
			display: none;
		}
	}
	.czName {
		display: flex;
		@include maxWidth(420) {
			margin: 1vh 0;
		}
	}
}
:deep(.cheng-dialog) {
	width: 60vw !important;
	@include maxWidth(1400) {
		width: 800px !important;
	}
}
</style>
